<template>
  <view class="payment-page">
    <view class="m1">
      <view class="cell">
        <text class="f32 bold" style="padding-right: 12rpx;">{{startTime}} 入住 - {{endTime}} 离开</text>
        <!-- <text class="f24">今天 19:30-22:00中选择4小时</text> -->
      </view>
      <view class="cell f30">{{room.facilities[0].name || '-'}}</view>
      <view class="cell f24">{{renderLabel}}</view>
      <view class="cell f20">订单确认后即视为消费，<text class="color f20">不支持7天无理由退</text>，请及时入住</view>
    </view>
    
    <view class="m1">
      <view class="bt">入住信息</view>
      <view class="form" v-if="type == 0">
        <view class="label f30">入住时段</view>
        <view class="value">
          <view class="top fr-cs">
            <view class="flex f30 bold">{{room.check_in_time + ' - ' + room.check_out_time}}</view>
            <!-- <image class="icon" src="/static/icon/arrow-icon.png"></image> -->
          </view>
          <view class="bottom f20">您可入住2小时30分钟，最晚22:00离店。请您在选择的时间段内入住，超时将可能无法入住</view>
        </view>
      </view>
      <view class="form">
        <view class="label f30">房间数量</view>
        <view class="value f30 flex bold">{{payload.roomNumber}}间（每间最多住2人）</view>
      </view>
      <view class="form">
        <view class="label f30">住客姓名</view>
        <view class="value f30 flex bold">{{payload.userName}}</view>
      </view>
      <view class="form">
        <view class="label f30">联系手机</view>
        <view class="value f30 flex bold">+86{{payload.mobile}}</view>
      </view>
    </view>
    
    <view class="m1">
      <view class="bt">请选择支付方式</view>
      <view class="pay-item">
        <image class="pay-icon" src="/hotel/static/icon/wechat-icon.png"></image>
        <view class="flex f30">微信支付</view>
        <image class="check" src="/hotel/static/icon/check-icon.png"></image>
      </view>
      <!-- <view class="pay-item">
        <image class="pay-icon" src="/hotel/static/icon/bank-icon.png"></image>
        <view class="flex f30">银行卡支付</view>
        <image class="check" src="/static/icon/check-icon.png"></image>
      </view> -->
    </view>
    
    <view class="bottom-fixed-btn">
      <view class="left f30 bold">
        <text class="f24">￥</text>
        {{price}}
      </view>
      <view class="right">
        <view class="f24">明细</view>
        <image class="icon" src="/static/icon/arrow.png"></image>
        <view class="btn" @click="pay">立即支付</view>
      </view>
    </view>
    
  </view>
</template>

<script>
  import moment from 'moment/moment';
  const app = getApp()
  
  export default {
    data() {
      return {
        payload: {},
        room: {
          facilities: []
        },
        type:'',
        price:''
      };
    },
    computed: {
      totalMoney() {
        return (this.room.price * this.payload.roomNumber).toFixed(2)
      },
      renderLabel() {
        return (this.room?.label || []).join(' ')
      },
      startTime() {
        return moment(this.payload.startTime).format('MM月DD日')
      },
      endTime() {
        return moment(this.payload.endTime).format('MM月DD日')
      }
    },
    methods: {
      pay() {
        uni.showLoading({
          mask: true
        })
        this.$api.setOrdersApi(this.payload).then(res => {
          if(res.code === 1){
            uni.requestPayment({
            	provider: 'wxpay',
            	timeStamp: res.data.timeStamp,
            	nonceStr: res.data.nonceStr,
            	package: res.data.package,
            	signType: res.data.signType,
            	paySign: res.data.paySign,
            	success: rest => {
            		this.$u.toast('支付成功！');
               setTimeout(()=>{
                 this.$u.route('/hotel/order/order');
               })
            	},
            	fail: err => {
                if (err.errMsg == "requestPayment:fail cancel") {
                  this.$u.toast('支付已取消');
                }else{
                  this.$u.toast('错误：' + err.errMsg)
                }
            	}
            });
          }else{
            this.$u.toast(res.msg);
          }
          uni.hideLoading()
          console.log('data === ', res.data)
        }).catch(() => {
          uni.hideLoading()
        })
      }
    },
    onLoad(e) {
      this.type = e.type ? Number(e.type) : 9
      this.price = e.price || '';
      const { roomInfo } = app.globalData
      this.room = roomInfo
      this.payload = uni.getStorageSync('payload')
      uni.removeStorageSync('payload')
    }
  }
</script>

<style lang="scss" scope>
.payment-page {
  color: #3C3D3E;
  padding: 0 30rpx calc(84rpx + env(safe-area-inset-bottom));
  box-sizing: border-box;
  overflow: hidden;
  .color {
    color: #CD1010;
  }
  .m1 {
    background-color: #fff;
    margin: 30rpx 0;
    box-sizing: border-box;
    padding: 0 30rpx;
    overflow: hidden;
    border-radius: 16rpx;
    .cell {
      margin: 20rpx 0;
    }
    .bt {
      line-height: 90rpx;
      font-size: 30rpx;
      color: #3C3D3E;
      font-weight: bold;
    }
    .form {
      @include flex(row,flex-start,center);
      box-shadow: 0 1px 0 #eee;
      .label {
        line-height: 98rpx;
        width: 210rpx;
      }
      .value {
        line-height: 98rpx;
        flex: 1;
        .top {
          .icon {
            width: 32rpx;
            height: 32rpx;
          }
        }
        .bottom {
          line-height: 1.5;
          padding-bottom: 30rpx;
        }
      }
    }
    .pay-item {
      height: 100rpx;
      @include flex;
      box-shadow: 0 -1px 0 #eee;
      .pay-icon {
        width: 34rpx;
        height: 34rpx;
        margin-right: 10rpx;
      }
      .check {
        width: 28rpx;
        height: 30rpx;
      }
    }
  }
}
.bottom-fixed-btn {
  background-color: #fff;
  box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0,0,0,0.07);
  padding: 0 30rpx env(safe-area-inset-bottom);
  height: calc(124rpx + env(safe-area-inset-bottom));
  box-sizing: border-box;
  @include flex(row,center,space-between);
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 9;
  .left {
    color: #2A70F9;
  }
  .right {
    @include flex(row,center,flex-end);
    .icon {
      width: 32rpx;
      height: 32rpx;
      margin-right: 8rpx;
    }
    .btn {
      width: 182rpx;
      height: 64rpx;
      line-height: 64rpx;
      text-align: center;
      background: #2A70F9;
      border-radius: 32rpx;
      font-size: 28rpx;
      color: #FFFFFF;
    }
  }
}
</style>
